<template>
  <div>
    <el-table :data="processData" border @cell-click="tableEdit">
      <el-table-column align="center" prop="firstLevelColumn" label="一级类目">
      </el-table-column>
      <el-table-column
        align="center"
        prop="inventoryQuantity"
        label="现有库存数量"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="selfOperatedReturnAmount"
        label="高库存商品占异常商品比"
      >
        <template slot-scope="scope">
          {{ scope.row.selfOperatedReturnAmount }}%
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="estimateSalesAmount"
        label="预估销售额"
      >
      </el-table-column>
      <el-table-column align="center" prop="availableSaleDays" label="可售天数">
      </el-table-column>
      <el-table-column align="center" prop="sevenSaleNum" label="近7天销量">
      </el-table-column>
      <el-table-column align="center" prop="fifteenSaleNum" label="近15天销量">
      </el-table-column>
      <el-table-column align="center" prop="newProQuantity" label="新品商品数">
      </el-table-column>
      <!-- <el-table-column
        align="center"
        prop="selfOperatedLiveSalesAmount"
        label="促销品商品数"
      >
      </el-table-column> -->
    </el-table>

    <el-table :data="ProCodeSaleList" border>
      <el-table-column align="center" prop="shopName" label="归属一级类目">
      </el-table-column>
      <el-table-column align="center" prop="spu" label="SKu编码">
      </el-table-column>
      <el-table-column align="center" prop="productName" label="商品名称">
      </el-table-column>
      <el-table-column align="center" prop="picUrl" label="商品图片">
      </el-table-column>
      <el-table-column
        align="center"
        prop="inventoryQuantity"
        label="现有库存数量"
      >
      </el-table-column>
      <el-table-column align="center" prop="inventoryAmount" label="库存金额">
      </el-table-column>
      <el-table-column
        align="center"
        prop="estimateSalesAmount"
        label="预估销售额"
      >
      </el-table-column>
      <el-table-column align="center" prop="sevenSaleNum" label="近7天销量">
      </el-table-column>
      <el-table-column align="center" prop="fifteenSaleNum" label="近15天销量">
      </el-table-column>
      <el-table-column align="center" prop="availableSaleDays" label="可售天数">
      </el-table-column>
      <el-table-column align="center" prop="isNewProduct" label="是否新品">
      </el-table-column>
      <!-- <el-table-column
        align="center"
        prop="selfOperatedLiveSalesAmount"
        label="是否促销"
      >
      </el-table-column> -->
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.thisPageSize"
      @pagination="getselectProCodeSaleList(pageReq)"
    />
  </div>
</template>
<script>
import {
  selectAbnormalProList,
  selectAbnormalProData,
  selectFirstLevelSaleList,
  selectProCodeSaleList,
} from "@/api/sale/BiSkuInfoDwd";
export default {
  props: {
    processData: {
      type: Array,
      default: () => [],
    },
    query: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      ProCodeSaleList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        thisPageSize: 10,
      },
      pageReq: {},
    };
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        this.getselectProCodeSaleList(this.processData[0]);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    tableEdit(row, column, cell, event) {
      this.queryParams.pageNum = 1;
      this.getselectProCodeSaleList(row);
    },
    getselectProCodeSaleList(row) {
      this.pageReq = {
        ...this.queryParams,
        ...this.query,
        firstLevelColumn: row.firstLevelColumn ? row.firstLevelColumn : null,
      };
      selectProCodeSaleList(this.pageReq).then((response) => {
        this.ProCodeSaleList = response.data ? response.data : [];
        this.total = response.totalCount ? response.totalCount : 0;
      });
    },
    tableRowClassName({ row, column, rowIndex, columnIndex }) {
      if (column.label.includes("自营")) {
        return "background:#ed7d31 !important;color:#fff ";
      } else if (column.label.includes("短视频")) {
        return "color: #515a6e;background:#c4dbf0 !important;";
      } else if (column.label.includes("直播")) {
        return "background:#ed7d31 !important;color:#fff ";
      } else if (column.label.includes("商品卡")) {
        return "color: #515a6e;background:#c4dbf0 !important;";
      } else if (column.label.includes("其他")) {
        return "background:#ed7d31 !important;color:#fff ";
      }
    },
  },
};
</script>




























































